<template>
    <div class="weatherContent">
        <div class="weatherBox">
            <van-field
                v-model="selectValueName"
                is-link
                readonly
                label="城市"
                placeholder="请选择城市"
                @click="showCityPicker = true"
            />
            <van-button class="btn" :class="{ active: isActive }" @keyup.enter="mapInit()" @click="mapInit()">
                查询
            </van-button>
        </div>
        <div class="weatherResultBox" v-if="weatherList && weatherList.length > 0">
            <div class="weatherResultBoxTop" v-if="weatherActiveList && weatherActiveList.length > 0">
                <p class="weatherResultBoxTopItem" style="font-size: 20px;font-weight: 700;">{{ weatherActiveList[0]?.date }}</p>
                <SvgIcon width="130px" height="130px" :name="weatherActiveList[0]?.icon" color="#f5c3cb"></SvgIcon>
                <p class="weatherResultBoxTopItem" style="font-size: 18px;font-weight: 500;">{{ weatherActiveList[0]?.dayWeather }}</p>
                <p class="weatherResultBoxTopItem" style="font-size: 25px;font-weight: 700;">{{ `${weatherActiveList[0]?.nightTemp}° - ${weatherActiveList[0]?.dayTemp}°` }}</p>
            </div>
            <div class="weatherResultBoxBottom">
                <div class="weatherResultBoxItem" v-for="(item, index) in weatherList" :key="index" :class="{ active: item.active }" @click="activeWeather(item)">
                    <p class="weatherResultBoxItemText" style="font-weight: 500;">{{ setTiem(item.date )}}</p>
                    <SvgIcon width="40px" height="40px" :name="item.icon" color="#f5c3cb"></SvgIcon>
                    <p class="weatherResultBoxItemText" style="font-weight: 500;">{{ `${item.nightTemp}° - ${item.dayTemp}°` }}</p>
                </div>
            </div>
        </div>
        <van-popup v-model:show="showCityPicker" destroy-on-close round position="bottom">
            <van-picker
                title="选择要查询的城市"
                :columns="cityList()"
                :columns-field-names="columnsFieldName"
                @change="onChange"
                @cancel="onCancel"
                @confirm="onConfirm"
            />
        </van-popup>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast, showConfirmDialog, showNotify } from 'vant'
import { cityList } from '@/utils/plugins'
import MapLoader from "@/utils/amap"
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()


const route = useRoute()
const router = useRouter()

const showCityPicker = ref<boolean>(false)
const selectValueName = ref<string>('')
const selectValue = ref<string>('')
const weatherList = ref<any>([])
const weatherActiveList = ref<any>([])

const isActive = ref<boolean>(false)

const columnsFieldName = {
    text: 'city',
    value: 'adcode'
}

const onCancel = () => {
    // 关闭城市选择器
    showCityPicker.value = false;
};

const onConfirm = ({selectedValues, selectedOptions}) => {
    showCityPicker.value = false;
    selectValue.value = selectedValues[0] || selectedOptions[0].value;
    selectValueName.value = selectedOptions[0].city;
}

const onChange = (item) => {
    console.log(item)
};

const handleClick = () => {
    isActive.value = !isActive.value
    setTimeout(() => {
        isActive.value = !isActive.value
    }, 100)
}

const setTiem = (dateString) => {
    const [year, month, day] = dateString.split('-');
    return `${month}-${day}`;
}

const activeWeather = (item: any) => {
    weatherActiveList.value = []
    weatherList.value.map((ele: any) => {
        ele.active = false
    })
    item.active = true
    weatherActiveList.value.push(item)
}

const mapInit = () => {
    handleClick()
    if (!selectValue.value) {
        showToast('请先选择城市')
        return
    }
    settings.handlerLoadingShow(true)
    MapLoader().then((AMap: any) => {
    //加载天气查询插件
    AMap.plugin('AMap.Weather', function () {
        //创建天气查询实例
        var weather = new AMap.Weather();

        //执行实时天气信息查询
        weather.getForecast(selectValue.value, function (err: any, data: any) {
            if (err) {
                showFailToast(err)
                return
            }
            weatherList.value = data.forecasts
            console.log(weatherList.value)
            weatherList.value.map((item: any) => {
                item.active = false
                switch (item.dayWeather) {
                case '晴':
                    item.icon = 'Sunny'
                    break;
                case '阴':
                    item.icon = 'MostlyCloudy'
                    break;
                case '多云':
                    item.icon = 'Cloudy'
                    break;
                case '阵雨':
                    item.icon = 'Lightning'
                    break;
                case '大雨':
                    item.icon = 'Pouring'
                    break;
                case '小雨':
                    item.icon = 'Drizzling'
                    break;
                case '大雪':
                    item.icon = 'Heavysnow'
                    break;
                case '小雪':
                    item.icon = 'Lightsnow'
                    break;
                default:
                    item.icon = 'Sunny'
                    break;
                }
            })
            weatherList.value[0].active = true
            weatherActiveList.value.push(weatherList.value[0])
            // weatherListTo.value =  data.forecasts.splice(1, 3)
            settings.handlerLoadingShow(false)
        });
        });
    })
}

onMounted(() => {

})

onUnmounted(() => {

})

</script>


<style lang="scss" scoped>
.weatherContent {
    width: 100vw;
    padding: 15px;
    position: relative;
    overflow: hidden;
    .weatherBox {
        .btn {
            margin-top: 10px;
            width: 100%;
            height: 50px;
            border-radius: 16px;
            border: none;
            background-color: #67dcfb;
            font-size: 16px;
            font-weight: 500;
            color: var(--text-color);
        }
        .active {
            // background-color: blue; /* 改变背景颜色 */
            transform: scale(1.1); /* 放大按钮 */
        }
    }
    .weatherResultBox {
        width: 100%;
        height: auto;
        margin-top: 60px;
        .weatherResultBoxTop {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-self: center;
            margin-bottom: 50px;
            .weatherResultBoxTopItem {
                margin: 15px;
                &:last-child {
                    margin-bottom: 0px;
                }
            }
        }
        .weatherResultBoxBottom {
            width: 100%;
            min-height: 90px;
            height: 90px;
            margin-top: 55px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            .weatherResultBoxItem {
                flex: 1;
                // width: 20%;
                height: 100%;
                display: flex;
                border-radius: 12px;
                flex-direction: column;
                align-items: center;
                justify-self: center;
                overflow: hidden;
                .weatherResultBoxItemText {
                    margin: 10px;
                    &:last-child {
                        // margin-bottom: 0px;
                    }
                }
                // margin: 20px 0;
            }
            .active {
                font-weight: 700;
                font-size: 14px;
                background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
                z-index: 2; /* 确保在最上层 */
            }
        }
    }

}
</style>